<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Exercise 3: Module Manipulation</title>
<link rel="stylesheet" type="text/css" media="all"  href="../css/libraries.css" />
<link rel="stylesheet" type="text/css" media="all"  href="../css/template.css" />
<!--<link rel="stylesheet" type="text/css" media="all"  href="../css/template_debug.css" />-->
<link rel="stylesheet" type="text/css" media="all" href="../css/grids.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/content.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/mod.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/mod_skins.css" />
<link rel="stylesheet" type="text/css" media="all" href="ugly.css" />
</head>
<body>
<div class="page">
	<div class="head">
		<img src="http://oocss.org/img/header.jpg" />
	</div>
	<div class="body">
		<div class="leftCol myYahoo">
			<h2>Left Column</h2>
			<p>Left column is 250px by default. It can be extended by several classes to allow for additional layouts.</p>
			<ul>
				<li>.gMail = 160px</li>
				<li>.gCal = 180px</li>
				<li>.yahoo = 240px</li>
				<li>.myYahoo = 300px</li>
			</ul>
		</div>
	    <div class="main">
			<h2>Main Content</h2>			
			<div class="line">
			  <div class="unit size1of4">
			  	<div class="mod grab"> 
					<b class="top"><b class="tl"></b><b class="tr"></b></b> 
					<div class="inner">
						<div class="hd bam">
							<h3>hot deals</h3>
						</div>
						<div class="bd">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
						</div>
					</div>
					<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
			    </div>
		      </div>
		      <div class="unit size1of4">
			  	<div class="mod onlinestore"> 
					<b class="top"><b class="tl"></b><b class="tr"></b></b> 
					<div class="inner">
						<div class="hd online">
							<h3>online store</h3>
						</div>
						<div class="bd">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
						</div>
					</div>
					<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
			    </div>
		      </div>
		      
			  <div class="unit size1of4">
			  	<div class="mod faq"> 
					<b class="top"><b class="tl"></b><b class="tr"></b></b> 
					<div class="inner">
						<div class="hd help">
							<h3>faq</h3>
						</div>
						<div class="bd">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
						</div>
					</div>
					<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
			    </div>
		      </div>
		      
		      <div class="unit size1of4 lastUnit">
			  	<div class="mod about"> 
					<b class="top"><b class="tl"></b><b class="tr"></b></b> 
					<div class="inner">
						<div class="hd info">
							<h3>about</h3>
						</div>
						<div class="bd">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
						</div>
					</div>
					<b class="bottom"><b class="bl"></b><b class="br"></b></b> 
			    </div>
		      </div>


		    </div>
		</div>
	</div>
	<div class="foot">
		<p>Fast & Furious by Lazyousuf. http://www.flickr.com/photos/lazyousuf/3112028635/ </p>
	</div>	
</div>
</body>
</html>
